<!-- 开发商-导入失败-编辑模态框 -->
<template>
<div>
    <el-dialog :title="title" :visible.sync="show" width="70%" @close="$emit('update:visible', false)">
        <el-form :rules="rules"  :model="editform" ref="editform" label-width="130px" label-position="left">
            <el-row >
                <el-col :span="11">
                    <el-form-item label="公司名称：" prop="companyName">
                        <el-input  v-model.trim="editform.companyName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="纳税人识别号：" prop="companyTaxpayer">
                        <el-input  v-model.trim="editform.companyTaxpayer" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="开户行名称：" prop="openingBank">
                        <el-input  v-model.trim="editform.openingBank" disabled autocomplete="off">
                            <el-button slot="append" type="primary" @click="bankShow = true">选择</el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="联行号：" prop="bankNumber">
                        <el-input  v-model.trim="editform.bankNumber" disabled autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="开户行所属省/市：" class="posterurl">
                        <div class="flex-box" >
                            <el-form-item prop="openingBankProvince">
                                <el-input :disabled="true" v-model.trim="editform.openingBankProvince" placeholder="省" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item prop="openingBankCity">
                                <el-input :disabled="true" v-model.trim="editform.openingBankCity" placeholder="市" autocomplete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-form-item>
                    <el-form-item label="邮政编码：" prop="companyPostalcode">
                        <el-input  v-model.trim="editform.companyPostalcode" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用途：" prop="apply">
                        <el-input  v-model.trim="editform.apply" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                 <el-col :span="1">&nbsp;</el-col>
                <el-col :span="12">
                    <el-form-item label="法定代表人：" prop="companyRepresentative">
                        <el-input  v-model.trim="editform.companyRepresentative" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="开户名称：" prop="bankName">
                        <el-input  v-model.trim="editform.bankName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="开户账户：" prop="bankAccount">
                        <el-input  v-model.trim="editform.bankAccount" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="地区代码信息：" prop="bankAreaCode">
                        <el-input  v-model='editform.bankAreaCode' autocomplete="off" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话：" prop="companyPhone">
                        <el-input  v-model.trim="editform.companyPhone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="公司地址：" class="posterurl">
                        <div class="flex-box" >
                            <el-form-item prop="companyProvince">
                                <el-select v-model.trim="editform.companyProvince" placeholder="省" @change="loadCity(editform.companyProvince,'cityOptions')">
                                   <el-option v-for="(item,index) in provinceOptions" :key="index" :label="item.province" :value="item.province"> </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="companyCity">
                                <el-select v-model.trim="editform.companyCity" placeholder="市" @change="loadArea(editform.companyCity,'cityOptions')">
                                    <el-option v-for="(item,index) in cityOptions" :key="index" :label="item.city" :value="item.city"> </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="companyCounty">
                                <el-select v-model.trim="editform.companyCounty" placeholder="区/县">
                                    <el-option v-for="(item,index) in areaOptions" :key="index" :label="item.area" :value="item.area"> </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width:100%" prop="companyAddress">
                                <el-input v-model.trim="editform.companyAddress" autocomplete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-form-item>
                    <el-form-item label="占位" style="opacity:0">
                       
                    </el-form-item>
                </el-col>
            </el-row>
		</el-form>
          <template slot="footer">
            <el-button @click="show = false">取 消</el-button>
            <el-button type="primary" @click="save('editform')">确 定</el-button>
        </template>
         <b-modal 
            :visible.sync='bankShow' 
            @onSave='editBank'>
        </b-modal>
    </el-dialog>
    </div>
</template>
<script>


import api from '@/api/apiPath'
import bankBranchModal from './bankBranchModal'
export default {
    components: {
        'b-modal':bankBranchModal
    },
	data () {
		return {
            bankShow:false,
            title:"开发商信息",
            show:false,
            backCityOptions:[],//城市
            provinceOptions:[],//省份
            cityOptions:[],//城市
            areaOptions:[],//区
         

            rules:{//验证
                companyName:[
                    {required: true, trigger: ['blur', 'change'] ,validator: (rule, value, callback) => {
                            if (!value) {
                                    return callback(new Error('请输入公司名称/姓名'));
                            }
                            if(value.length>30){
                                    return callback(new Error('公司名称/姓名长度不能大于30'));
                            }
                            callback();
                        }
                    }
                ],
                companyTaxpayer:[
                     { required: true, trigger: ['blur', 'change'] ,validator:(rule, value, callback)=>{
                            const reg =  /^[0-9A-Z]{15,}$/;
                            if(!value) return callback(new Error("请输入纳税人识别号"))
                            if((value.length !=15 && value.length !=17 && value.length !=18 && value.length !=20) || !reg.test(value))
                                return callback(new Error("请输入正确格式的纳税人识别号"))
                          
                            callback()
                            
                        } 
                    },
                ],
                openingBank:[
                    {required: true, trigger: ['blur', 'change'] ,validator: (rule, value, callback) => {
                            if (!value) {
                                    return callback(new Error('请输入开户行名称'));
                            }
                            if(value.length>30){
                                    return callback(new Error('开户行名称长度不能大于30'));
                            }
                            callback();
                        }
                    }
                ],
                bankNumber: [
                    {  required: true, trigger: ['blur', 'change'] ,validator: (rule, value, callback)=>{
                        const reg = /^\d{12}$/;
                        if(!value){
                            callback(new Error("请输入联行号"))
                        }else if(!reg.test(value)){
                             callback(new Error("请输入正确格式的联行号"))
                        }else{
                            callback()
                        }
                    }}
                ],
                bankAreaCode:[
                    { required: true, message: '请输入地区代码信息', trigger:'blur' },
                ],
                companyPhone:[
                    { required: true, trigger: ['blur', 'change'] ,validator:(rule, value, callback)=>{
                            const reg = /^0\d{2,3}-?\d{7,8}$|^1\d{10}$/;
                            if(!value){
                                callback(new Error("请输入联系电话"))
                            }else if(!reg.test(value)){
                                callback(new Error("请输入正确的联系电话"))
                            }else{
                                callback()
                            }
                        } 
                    }
                ],
                apply:[
                    {required: true, trigger: ['blur', 'change'] ,validator: (rule, value, callback) => {
                            if (!value) {
                                    return callback(new Error('请输入用途'));
                            }
                            if(value.length>50){
                                    return callback(new Error('用途长度不能大于50'));
                            }
                            callback();
                        }
                    }
                ],
                companyRepresentative:[
                    { required: true,  trigger: ['blur', 'change'], validator: (rule, value, callback) => {
                            if(!value) return callback(new Error("请输入法定代表人"));
                            if(value.length > 20) return callback(new Error("法定代表人长度不能大于20"));
                             callback();
                        }
                   }
                ],
                bankName:[
                    { required: true, message: '请输入开户名称', trigger:'blur' },
                    { min: 0, max: 30, message: '开户名称长度不能大于30个字符', trigger: ['blur', 'change'] }
                ],
                bankAccount: [
                    {  required: true, trigger: ['blur', 'change'] ,validator: (rule, value, callback)=>{
                        const reg = /^[0-9]\d*$/;
                        if(!value){
                            callback(new Error("请输入开户账号"))
                        }else if(!reg.test(value)){
                             callback(new Error("请输入正确格式的银行账号"))
                        }else{
                            callback()
                        }
                    }}
                ],
                companyPostalcode:[
                     {  required: false, trigger: ['blur', 'change'] ,validator: (rule, value, callback)=>{
                        const reg = /^[1-9]{6}$/;
                        if(!value)  return callback();
                        if(!reg.test(value)){
                             callback(new Error("请输入正确格式的邮政编码"))
                        }else{
                            callback()
                        }
                    }}
                ], 
                companyProvince: [
                   { required: true, message: '请选择省份', trigger: 'change' }
                ],
                companyCity: [
                   { required: true, message: '请选择城市', trigger: 'change' }
                ],
                companyCounty: [
                   { required: true, message: '请选择区县', trigger: 'change' }
                ],
                companyAddress: [
                    {required: true, trigger: ['blur', 'change'] ,validator: (rule, value, callback) => {
                            if (!value) {
                                    return callback(new Error('请输入详细地址'));
                            }
                            if(value.length>50){
                                    return callback(new Error('长度不得超过50个字符'));
                            }
                            callback();
                        }
                    },
                   
                ],
                openingBankProvince: [
                   { required: true, message: '请选择省份', trigger: 'change' }
                ],
                openingBankCity: [
                   { required: true, message: '请选择城市', trigger: 'change' }
                ],


            },
            
        }
    },
    props:['visible','editform'],
    watch:{
        visible(o,n){
            if(o){
                this.show = true;
            }else{
                  this.show = false;
            }
        }
    },
    
    methods:{
         editBank(val){
             ({
                bankBranchName:this.editform.openingBank,
                cityName:this.editform.openingBankCity,
                provinceName:this.editform.openingBankProvince,
                linkNumber:this.editform.bankNumber,
                openCode:this.editform.bankAreaCode,
            } = val)
        },
          save(formName) {
            let _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    _this.show = false;
                    _this.$emit('onSave',this.editform)
                } else {
                    return false;
                }
            });
        },
          //获取省
        loadprovinces(){
             this.axios.get(api.GETPROVINCES).then(res => {
                    if (res.data.code == 200) {
                       this.provinceOptions = res.data.data;
                       
                    }
                })
        },
        //获取市
        loadCity(province,options){
            let thisObj = this.provinceOptions.find(item=>{
                return province === item.province;
            })
            if(options == 'cityOptions'){
                this.$set(this.editform,'companyCity',null);
                this.$set(this.editform,'companyCounty',null);
            }else{
                this.$set(this.editform,'openingBankCity',null);
            }
            this.axios.get(`${api.GETCITY}/${thisObj.provinceid}`).then(res => {
                    if (res.data.code == 200) {
                       this[options] = res.data.data.cityList;
                       
                    }
                })
        },
       //获取区
        loadArea(city,options){
             let thisObj = this.cityOptions.find(item=>{
                return city === item.city;
            })
            
            if(options == 'cityOptions'){
                this.editform.companyCityCode = thisObj.cityId;
                this.$set(this.editform,'companyCounty',null);
            }
            this.axios.get(`${api.GETAREA}/${thisObj.cityId}`).then(res => {
                    if (res.data.code == 200) {
                       this.areaOptions = res.data.data.cityArealist;
                       
                    }
            })
        }
    },
    
	created () {
        this.loadprovinces();
    },
	destroyed() {
		
	},
	filters: {

	}
}

</script>

<style lang="stylus" >
     .flex-box{
        display:flex;
    }
    .flex-box>*{
        margin-right :10px;
    }
    .flex-box>*:last-child{
         margin-right:0;
    }
    .posterurl .el-form-item__label:before{
        content: '*';
        color: #f56c6c;
        margin-right: 4px;
    }
</style>
